<template>
	<view class="container">
		<image class="banner" src="/static/svg/profile.svg" mode="widthFix"></image>
		<view class="profile-header">
			<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
			<view class="profile-info">
				<text class="profile-name">{{ nickname }}</text>
				<text class="profile-sub">学习让生活更精彩</text>
			</view>
		</view>
		<uni-list>
			<uni-list-item title="昵称" :rightText="nickname" clickable @click="editNickname" />
			<uni-list-item title="累计做题" :rightText="stats.total + ' 题'" />
			<uni-list-item title="正确率" :rightText="stats.correctRate + '%'" />
		</uni-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nickname: '学习者',
			avatarUrl: '/static/icons/practice-active.png',
			stats: {
				total: 0,
				correctRate: 0
			}
		}
	},
	onShow() {
		try {
			const stats = uni.getStorageSync('practice_stats') || { total: 0, correct: 0 }
			const total = stats.total || 0
			const correct = stats.correct || 0
			const correctRate = total ? Math.round((correct / total) * 100) : 0
			this.stats = { total, correctRate }
		} catch(e) {}
	},
	methods: {
		editNickname() {
			uni.showModal({
				title: '修改昵称',
				editable: true,
				placeholderText: '请输入昵称',
				success: (res) => {
					if (res.confirm && res.content) {
						this.nickname = res.content
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';
.container {
	min-height: 100vh;
	background-color: #F9FAFB;
}
.profile-header {
	display: flex;
	align-items: center;
	padding: 24rpx;
}
.profile-info {
	margin-left: 24rpx;
}
.profile-name {
	font-size: 18px;
	color: #333;
	font-weight: 600;
}
.profile-sub {
	font-size: 14px;
	color: #666;
	margin-top: 6rpx;
}
</style>
